<template>
  <div class="user-page">
    <breadcrumb />
    <div class="search-container">
      <Search @search="getSearchParams" />
    </div>
    <div class="table-container">
      <!-- <Table :searchModel="searchParams" /> -->
      <div class="table-component">
        <div class="submit-btns">
          <div></div>
          <div class="submit-btns-right">
            <el-button type="primary" class="submit-btn-add" @click="add">
              <img class="icon-img" :src="iconAdd" alt="" />
              新增</el-button
            >
            <el-button type="primary" class="submit-btn-import" @click="importData">
              <img class="icon-img" :src="iconImport" alt="" />导入</el-button
            >
          </div>
        </div>
        <!-- <div>人员管理{{ searchModel }}</div> -->
        <div class="table">
          <el-table
            :data="table.data"
            :loading="table.loading"
            style="width: 100%"
            :header-cell-style="{
              background: '#F1F1F1',
              'font-size': '14px',
              'font-weight': 600,
              color: '#333333',
            }"
            :cell-style="{
              'font-size': '14px',
              'font-weight': 400,
              color: '#333333',
            }"
          >
            <el-table-column label="序号" min-width="60" fixed="left">
              <template #default="scope">
                {{ (scope.$index + 1).toString().padStart(2, "0") }}
              </template>
            </el-table-column>
            <el-table-column prop="userName" label="账号" min-width="120" />
            <el-table-column prop="realName" label="姓名" min-width="120" />
            <el-table-column prop="phone" label="手机号码" min-width="120" />
            <!-- <el-table-column prop="email" label="电子邮箱" min-width="180">
              <template #default="scope">
                <div v-if="scope.row.email === null || scope.row.email === ''">
                  -
                </div>
                <div v-else>{{ scope.row.email }}</div>
              </template>
            </el-table-column> -->
            <el-table-column prop="deptName" label="所属部门" min-width="100" />
            <el-table-column prop="roleName" label="用户角色" min-width="160" />
            <el-table-column label="账号状态">
              <template #default="scope">
                <div class="status-color">
                  <div
                    :class="scope.row.status == false ? 'status-red' : 'status-blue'"
                  ></div>
                  <div>
                    {{ scope.row.status == false ? "已禁用" : "启用中" }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="260" fixed="right">
              <template #default="scope">
                <el-button
                  @click="edit(scope.row)"
                  type="primary"
                  size="small"
                  link
                  style="color: #007aff; font-size: 14px"
                  >编辑</el-button
                >
                <el-button
                  v-if="scope.row.status == true"
                  @click="accountStatus(scope.row)"
                  type="primary"
                  size="small"
                  link
                  style="color: #007aff; font-size: 14px"
                  >停用账号</el-button
                >
                <el-button
                  v-if="scope.row.status == false"
                  @click="accountStatus(scope.row)"
                  type="primary"
                  size="small"
                  link
                  style="color: #007aff; font-size: 14px"
                  >重启账号</el-button
                >
                <el-button
                  v-if="scope.row.status == true"
                  @click="resetPassword(scope.row)"
                  type="primary"
                  size="small"
                  link
                  style="color: #007aff; font-size: 14px"
                  >重置密码</el-button
                >
                <el-button
                  @click="journal(scope.row)"
                  type="primary"
                  size="small"
                  link
                  style="color: #007aff; font-size: 14px"
                  >日志</el-button
                >
              </template>
            </el-table-column>
            <template #empty>
              <el-empty :image="imgNone" />
            </template>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="pagination.pageSizes"
            layout="total,sizes, prev, pager, next, jumper"
            :total="table.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <el-dialog
          v-model="dialogVisible"
          :title="title"
          destroy-on-close
          :before-close="handleClose"
          :close-on-click-modal="false"
          :width="
            componentTag === journalComponent || componentTag === importComponent
              ? '800px'
              : '520px'"
        >
          <component
            :is="componentTag"
            @operationDone="operationDone"
            :operationId="operationId"
          >
          </component>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup>
import breadcrumb from "@/components/breadcrumb/index.vue";
import Search from "./components/search.vue";
import Table from "./components/table.vue";
import iconAdd from "@/assets/image/btn/icon-add.png";
import iconImport from "@/assets/image/btn/icon-import.png";
const imgNone = new URL("@/assets/image/imgNone.png", import.meta.url).href;
import { getUser, getAccountStatus, getResetpwd } from "./request.js";
import addComponent from "./components/addComponent.vue";
import editComponent from "./components/editComponent.vue";
import journalComponent from "./components/journalComponent.vue";
import importComponent from "./components/importComponent.vue";

import { ref, reactive, shallowRef, watch } from "vue";

const searchParams = ref({});

// 搜索
const searchModel = ref({
  keyword: "",
  department: "",
  status: "",
});

const getSearchParams = (value) => {
  searchModel.value = value;
  // console.log(value);
  getData();
};

// const props = defineProps({
//   searchModel: {
//     type: Object,
//     default: () => {},
//   },
// });

// 弹窗
const title = ref("");
const dialogVisible = ref(false);
const componentTag = shallowRef("");
const operationId = ref("");
const operationDone = (r) => {
  dialogVisible.value = false;
  operationId.value = "";
  if (!r) {
    getData();
  }
};

// 新增按钮
const add = () => {
  title.value = "新增人员信息";
  componentTag.value = addComponent;
  dialogVisible.value = true;
};

// 编辑按钮
const edit = (row) => {
  title.value = "编辑人员信息";
  operationId.value = row;
  componentTag.value = editComponent;
  dialogVisible.value = true;
};

// 导入
const importData = () => {
  title.value = "导入人员信息";
  componentTag.value = importComponent;
  dialogVisible.value = true;
};

// 重启/停用账号按钮
const accountStatus = async (row) => {
  ElMessageBox.confirm(
    `您确定要${row.status == true ? "停用" : "启用"}用户[${row.realName}]吗？`,
    "温馨提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(async () => {
    await getAccountStatus({
      userId: row.userId,
      status: !row.status,
    }).then((res) => {
      // console.log("res ===>", res);
      if (res.data.code === 0) {
        getData();
        ElMessage({
          type: "success",
          message: res.data.result,
        });
      }
    });
  });
};

// 重置密码按钮
const resetPassword = async (row) => {
  ElMessageBox.confirm(
    `重置密码将会发到用户的手机,您确定要重置用户[${row.realName}]的密码吗?`,
    "温馨提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(async () => {
    await getResetpwd(row.userId).then((res) => {
      // console.log("res ===>", res);
      if (res.data.code === 0) {
        ElMessage({
          type: "success",
          message: res.data.result,
        });
      }
    });
  });
};

// 日志按钮
const journal = (row) => {
  // console.log(row);
  title.value = `操作日志 [${row.realName}]`;
  operationId.value = row;
  componentTag.value = journalComponent;
  dialogVisible.value = true;
};

const table = reactive({
  data: [],
  total: 0,
  loading: true,
});

const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  pageSizes: [10, 20, 30, 50],
});

const getData = async () => {
  const res = await getUser({
    keyword: searchModel.value.keyword,
    deptId: searchModel.value.department,
    status: searchModel.value.status,
    pageNo: pagination.currentPage,
    pageSize: pagination.pageSize,
  });
  console.log("res ===>", res);
  if (res.data.code === 0) {
    table.data = res.data.result.items;
    table.total = parseInt(res.data.result.total);
    table.loading = false;
  }
};

const handleCurrentChange = (value) => {
  pagination.currentPage = value;
  getData();
};

const handleSizeChange = (value) => {
  pagination.pageSize = value;
  getData();
};

getData();
</script>

<style lang="less" scoped>
.search-container {
  margin-top: 16px;
  min-height: 100%;
  padding: 24px 24px 8px 24px;
  background: #fff;
  border-radius: 6px;
}
.table-container {
  margin-top: 16px;
  min-height: 100%;
  padding: 24px;
  background: #fff;
  border-radius: 6px;
}
.table-component {
  .submit-btns {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
  }
  .submit-btns-right {
    display: flex;
  }
  .submit-btn-add {
    background: #007aff;
    border: 1px solid #007aff;
    border-radius: 2px;
    margin-left: 87px;
    padding: 5px 16px;
  }
  .submit-btn-import {
    background: #00d1ff;
    border: 1px solid #00d1ff;
    border-radius: 2px;
    margin-left: 12px;
    padding: 5px 16px;
  }
  .icon-img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
  }
  .table {
    margin-bottom: 15px;
    .status-color {
      display: flex;
      align-items: center;
    }
    .status-red {
      width: 6px;
      height: 6px;
      background: #ed1c24;
      margin-right: 8px;
      border-radius: 50%;
    }
    .status-blue {
      width: 6px;
      height: 6px;
      background: #007aff;
      margin-right: 8px;
      border-radius: 50%;
    }
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
